<template>
    <div class="FooterContainer">
      <div class="FooterLeft">
        <span>
           <el-button plain icon="el-icon-menu" size="mini" circle @click="changeMenu()"></el-button>
        </span>
      </div>
      <div class="FooterMiddle"></div>
      <div class="FooterRight">
        ©2021-11-10 | KuQi | 1124456815@qq.com ️
      </div>
    </div>
</template>

<script>
export default {
  name: "FooterComponent",
  methods:{
    changeMenu(){
      this.$store.commit("collapseMenu");
    }
  }
}
</script>

<style >
    .FooterContainer{
      background-color: steelblue;
      width: auto;
      display: flex;
      height: 39px;
      align-items: center;
      border-top: 1px steelblue solid;
      justify-content: center;
    }
    .FooterLeft{
      height: auto;
      width: 200px;
      padding-left: 10px;
      font-weight: bold;
      font-size: 20px;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }
    .FooterMiddle{
      flex: 1;
    }
    .FooterRight{
      text-align: right;
      height: auto;
      width: 400px;
      padding-right: 20px;
      font-size: 15px;
    }

</style>
